import { Text, StyleSheet, View,TouchableOpacity, Image } from 'react-native'
import React, { Component } from 'react'
import {Images} from '../resource'
import {Modal as AntdModal} from '@ant-design/react-native';

export default class SettingPage extends Component {


  constructor(props){
    super(props)

    this.state = {
      settingList: [{'name':'退出登录'}, {'name':'检查新版本'}],
      showLogin: false
    
    };

  }


  //退出登录
  logout(){

  }

  clickItem(index){

    this.setState({showLogin: true})

  }

  renderItemList(){

    return this.state.settingList.map((item, index) => {
      return (
        <TouchableOpacity activeOpacity={0.5} onPress={() => this.clickItem(index)}>
        <View style={styles.itemBg}>
               <Text style = {styles.boxText}>{item.name}</Text>
               <Image source={Images.ic_jump} style={{ width: 25, height: 25 }}></Image>
       </View>

       <View style={styles.splitLine}>
       </View>

       </TouchableOpacity>
      );
  });
  }


  render() {

    
    return (
      <View style={styles.container}>
          
          <View style={styles.itemContainer}>
          {
            this.renderItemList()
          }

      
          </View>

          <AntdModal
          title="提示"
          transparent
          visible={this.state.showLogin}
          footer={ [
            { text: 'Cancel', onPress: () =>{ this.setState({showLogin: false})}},
            { text: 'Ok', onPress: () => {this.setState({showLogin: false})} },
          ]}>
          <View style={{ paddingVertical: 20 }}>
            <Text style={{ textAlign: 'center' }}>确定要退出登录吗？</Text>
          </View>
        </AntdModal>
      </View>
    )
  }
}

const styles = StyleSheet.create({

  container:{
    flex: 1, 
    flexDirection:'column',
    backgroundColor:'#dedede',
  },

  itemContainer:{
    flexDirection:'column',
    justifyContent: 'flex-start',
    alignItems:'stretch',
    borderRadius: 10,
    backgroundColor: '#fff',
    margin: 10
  },

  itemBg:{
    flexDirection: 'row',
    height: 60,
    alignItems:'center',
    justifyContent:'center',
    // backgroundColor: '#fff',
    paddingLeft: 20,
    paddingRight: 20

  },
  splitLine:{

    height: 1,
    backgroundColor: '#dedede',
    marginLeft: 10,
    marginRight: 10

  },
  
  boxText:{
    flex: 1,
    color: '#333',
    textAlign: 'left',
    fontSize: 15
  }


})